<template>
  <div class="phone-detail-container">
    <div class="content">
      <div class="main">
        <div class="left-img">
          <img :src="detailData.imgUrl" alt="" />
        </div>
        <div class="right-detail">
          <h1>{{ detailData.name }}</h1>
          <div class="price">{{ detailData.price }}</div>
          <div class="phoneType-Time">
            <div class="phoneType">手机类型：{{ detailData.phoneType }}</div>
            <div class="publishTime">发布时间：2022-09-01</div>
          </div>

          <div class="canshuCard">
            <ul>
              <li>
                <div class="left-icon"><i class="iconfont">&#xe617;</i></div>
                <div class="right-canshu">
                  <div class="canshuName">中央处理器</div>
                  <div class="canshu">{{ detailData.CPU }}</div>
                </div>
              </li>
              <li>
                <div class="left-icon"><i class="iconfont">&#xe68e;</i></div>
                <div class="right-canshu">
                  <div class="canshuName">运行内存</div>
                  <div class="canshu">{{ detailData.RAM }}</div>
                </div>
              </li>
              <li>
                <div class="left-icon"><i class="iconfont">&#xe60d;</i></div>
                <div class="right-canshu">
                  <div class="canshuName">屏幕尺寸</div>
                  <div class="canshu">{{ detailData.size }}</div>
                </div>
              </li>
              <li>
                <div class="left-icon"><i class="iconfont">&#xe608;</i></div>
                <div class="right-canshu">
                  <div class="canshuName">电池容量</div>
                  <div class="canshu">{{ detailData.battery }}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="detail">
        <ul>
          <li>
            <div class="left-icon"><i class="iconfont">&#xe61c;</i></div>
            <div class="right-canshu">
              <div class="canshuName">存储空间</div>
              <div class="canshu">{{ detailData.ROM }}</div>
            </div>
          </li>
          <li>
            <div class="left-icon"><i class="iconfont">&#xe606;</i></div>
            <div class="right-canshu">
              <div class="canshuName">充电功率</div>
              <div class="canshu">{{ detailData.charge }}</div>
            </div>
          </li>
          <li>
            <div class="left-icon"><i class="iconfont">&#xe60b;</i></div>
            <div class="right-canshu">
              <div class="canshuName">指纹解锁</div>
              <div class="canshu">{{ detailData.pingerprint }}</div>
            </div>
          </li>
          <li>
            <div class="left-icon"><i class="iconfont">&#xe7a5;</i></div>
            <div class="right-canshu">
              <div class="canshuName">面容ID</div>
              <div class="canshu">{{ detailData.faceId }}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailData: {},
    };
  },
  mounted() {
    this.detailData = this.$route.params.val;
  },
};
</script>

<style lang='less' scpoed>
.phone-detail-container {
  // background-color: rgb(214, 214, 214);
  background-color: #fff;
  .content {
    width: 80%;
    margin: 0 auto;
    padding-top: 20px;
    background-color: rgb(255, 255, 255);
    .main {
      width: 100%;
      height: 400px;
      border-bottom: 1px solid rgb(207, 207, 207);
      display: flex;
      .left-img {
        height: 300px;
        width: 250px;
        // border: 1px solid green;
        margin: auto 50px;
        overflow: hidden;
        img {
          height: 100%;
          position: relative;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .right-detail {
        width: 65%;
        margin: auto 0;
        text-align: left;
        h1 {
          padding: 20px 0;
          border-bottom: 1px solid rgb(220, 220, 220);
        }
        .price {
          color: orangered;
          font-size: 25px;
          margin: 5px 0;
        }
        .phoneType-Time {
          height: 40px;
          .phoneType {
            margin: 5px 0;
            float: left;
            margin-right: 20px;
          }
          .publishTime {
            float: left;
            margin: 5px 0;
          }
        }
        .canshuCard {
          width: 100%;
          // height: 100px;

          ul {
            display: flex;
            flex-wrap: wrap;
            li {
              width: 300px;
              height: 80px;
              margin: 5px 5px;
              border: 1px solid rgb(194, 192, 253);
              display: flex;
              background-color: #ecf3fd;
              .left-icon {
                height: 60px;
                width: 60px;
                margin: auto 5px;
                i {
                  font-size: 60px;
                  color: #5fa7ff;
                }
              }
              .right-canshu {
                height: 60px;
                width: 210px;
                margin: auto 5px;
                .canshuName {
                  margin: 5px 0;
                  color: #5fa7ff;
                }
                .canshu {
                  font-size: 14px;
                  color: rgb(0, 0, 0);
                }
              }
            }
          }
        }
      }
    }
    .detail {
      width: 100%;
      // height: 500px;
      padding: 50px 0 100px 0;
      ul {
        display: flex;
        justify-content: space-around;
        // flex-wrap: wrap;
        li {
          width: 250px;
          height: 80px;
          margin: 5px 5px;
          border: 1px solid rgb(253, 221, 192);
          display: flex;
          background-color: #fdf1ec;
          .left-icon {
            height: 60px;
            width: 60px;
            margin: auto 5px;
            i {
              font-size: 60px;
              color: #ffa45f;
            }
          }
          .right-canshu {
            height: 60px;
            width: 210px;
            margin: auto 5px;
            text-align: left;

            .canshuName {
              margin: 5px 0;
              color: #ff9f5f;
            }
            .canshu {
              font-size: 14px;
              color: rgb(0, 0, 0);
            }
          }
        }
      }
    }
  }
}
</style>